<template>
  <div class="body">
    <section class="index-banner">
      <div class="index-bannerMain clearfix center-block">
        <div class="index-title pull-left">
          <h2>工程建设项目联合审批平台</h2>
        </div>
      </div>
    </section>

    <section class="JX_mainTop">
      <div class="center-block">
        <div id="QuaT1" class="mainTop_tab QuaT clearfix">
          <h3 class="circular-title"></h3>
          <div id="QuaTle1" class="QuaTle Q_left">
            <span
              @click="activeTab(index)"
              :class="{active:index==idx}"
              v-for="(item, index) in dataType"
              :key="index"
            >{{item}}</span>
            <div class="tip">
              <i class="dtFont dtFont-wenhao1"></i>如何使用平台查找办理的事项
              <div class="T_prompt">
                工程建设项目网上办事大厅，以突出网上办事和为申请人提供在线申报服务为主旨，辅助提供行政审批相
                关信息服务，力求实用性。申请人可以通过该网站在线申报审批事项，直接连通市行政服务中心窗口，审批人员从网上
                进行审核，提出修改和补正意见，申请人修正后，审批人员即可审批并通知申请人审批结果，申请人只需持原件到市行
                政服务中心一次领证。同时，“网上办事大厅”提供行政审批政务公开、办事指南、政策查询、网上投诉等功能，以方便
                申请人使用，并接受社会监督。
              </div>
            </div>
          </div>
        </div>
        <div id="QuaBoy1" class="mainTop_content QuaBoy">
          <section :class="idx==0?'active':''">
            <div class="m_c_text">
              <h3 class="m_c_title">
                项目类型
                <span class="tipOrange">(请认真选择"项目类型",一经选择将无法改动,并影响后续审批环节,后果自负!)</span>
              </h3>
              <ul class="m_c_list clearfix">
                <li
                  :class="{active:index==ids}"
                  @click="projeckList(index)"
                  v-for="(item,index) in projectList"
                  :key="index"
                >{{item}}</li>
              </ul>
              <h3 class="m_c_title">
                申办环节
                <span class="tipGray">(行政审批)</span>
              </h3>
              <div class="tab_box">
                <ul class="m_c_flow active clearfix">
                  <li class="Red">
                    <a href="javascript:;">
                      <i class="dtFont dtFont-lixiangyongdiguihuaxuke"></i>
                    </a>
                    <p>立项用地规划许可</p>
                  </li>
                  <li class="Orange">
                    <a href="javascript:;">
                      <i class="dtFont dtFont-gongchengjianshexuke"></i>
                    </a>
                    <p>工程建设许可</p>
                  </li>
                  <li class="Green">
                    <a href="javascript:;">
                      <i class="dtFont dtFont-shigongxuke"></i>
                    </a>
                    <p>施工许可</p>
                  </li>
                  <li class="Blue">
                    <a href="javascript:;">
                      <i class="dtFont dtFont-jungongyanshou"></i>
                    </a>
                    <p>竣工验收</p>
                  </li>
                </ul>
                <ul class="m_c_flow clearfix">
                  <li class="Red">
                    <a href="javascript:;">
                      <i class="dtFont dtFont-lixiangyongdiguihuaxuke"></i>
                    </a>
                    <p>立项用地规划许可</p>
                  </li>
                  <li class="Orange">
                    <a href="javascript:;">
                      <i class="dtFont dtFont-gongchengjianshexuke"></i>
                    </a>
                    <p>工程建设许可</p>
                  </li>
                  <li class="Green">
                    <a href="javascript:;">
                      <i class="dtFont dtFont-shigongxuke"></i>
                    </a>
                    <p>施工许可</p>
                  </li>
                </ul>
                <ul class="m_c_flow clearfix">
                  <li class="Red">
                    <a href="javascript:;">
                      <i class="dtFont dtFont-lixiangyongdiguihuaxuke"></i>
                    </a>
                    <p>立项用地规划许可</p>
                  </li>
                  <li class="Orange">
                    <a href="javascript:;">
                      <i class="dtFont dtFont-gongchengjianshexuke"></i>
                    </a>
                    <p>工程建设许可</p>
                  </li>
                </ul>
                <ul class="m_c_flow clearfix">
                  <li class="Red">
                    <a href="javascript:;">
                      <i class="dtFont dtFont-lixiangyongdiguihuaxuke"></i>
                    </a>
                    <p>立项用地规划许可</p>
                  </li>
                </ul>
              </div>
            </div>
          </section>
          <section :class="idx==1?'active':''">暂无</section>
        </div>
      </div>
    </section>

    <section class="JX_News">
      <div class="center-block clearfix">
        <div class="ArticleList">
          <h3 class="circular-title">
            公示公告
            <a href="#">查看更多 ></a>
          </h3>
          <div class="Art-body">
            <ul class="Art-body-ul">
              <li>
                <a href="javascript:;">
                  <span>
                    <small>[通知公告]</small>到底什么是人工智能？人工智能不能做什么？
                  </span>
                  <b>2019-05-02</b>
                </a>
              </li>
              <li>
                <a href="javascript:;">
                  <span>
                    <small>[通知公告]</small>到底什么是人工智能？人工智能不能做什么？
                  </span>
                  <b>2019-05-02</b>
                </a>
              </li>
              <li>
                <a href="javascript:;">
                  <span>
                    <small>[通知公告]</small>到底什么是人工智能？人工智能不能做什么？
                  </span>
                  <b>2019-05-02</b>
                </a>
              </li>
              <li>
                <a href="javascript:;">
                  <span>
                    <small>[通知公告]</small>到底什么是人工智能？人工智能不能做什么？
                  </span>
                  <b>2019-05-02</b>
                </a>
              </li>
              <li>
                <a href="javascript:;">
                  <span>
                    <small>[通知公告]</small>到底什么是人工智能？人工智能不能做什么？
                  </span>
                  <b>2019-05-02</b>
                </a>
              </li>
            </ul>
          </div>
        </div>
        <div class="ArticleList">
          <h3 class="circular-title">
            政策法规
            <a href="#">查看更多 ></a>
          </h3>
          <div class="Art-body">
            <ul class="Art-body-ul">
              <li>
                <a href="javascript:;">
                  <span>
                    <small>[通知公告]</small>到底什么是人工智能？人工智能不能做什么？
                  </span>
                  <b>2019-05-02</b>
                </a>
              </li>
              <li>
                <a href="javascript:;">
                  <span>
                    <small>[通知公告]</small>到底什么是人工智能？人工智能不能做什么？
                  </span>
                  <b>2019-05-02</b>
                </a>
              </li>

              <li>
                <a href="javascript:;">
                  <span>
                    <small>[行为规范]</small>到底什么是人工智能？人工智能不能做什么？
                  </span>
                  <b>2019-05-02</b>
                </a>
              </li>
              <li>
                <a href="javascript:;">
                  <span>
                    <small>[行为规范]</small>到底什么是人工智能？人工智能不能做什么？
                  </span>
                  <b>2019-05-02</b>
                </a>
              </li>
              <li>
                <a href="javascript:;">
                  <span>
                    <small>[行为规范]</small>到底什么是人工智能？人工智能不能做什么？
                  </span>
                  <b>2019-05-02</b>
                </a>
              </li>
            </ul>
          </div>
        </div>
      </div>
    </section>
    <!-- 一图解读区域 -->
    <section class="JX_Explain">
      <div class="center-block">
        <h3 class="circular-title">
          一图解读
          <a href="#" @click="goexplainDetail">查看更多 ></a>
        </h3>
        <ul class="R_explain clearfix">
          <li>
            <router-link to="/projectApproval/explainDetail?id=1">
              <a class="R_card" href="#">
                <div class="R_card_cover">
                  <img src="../../../assets/images/ReadOne.jpg" alt />
                </div>
                <div class="R_card_text">
                  <h4 class="title">社会投资项目审批改革</h4>
                </div>
              </a>
            </router-link>
          </li>
          <li>
            <a class="R_card" href="/一图图解2.html">
              <div class="R_card_cover">
                <img src="../../../assets/images/ReadOne.jpg" alt />
              </div>
              <div class="R_card_text">
                <h4 class="title">社会投资项目审批改革</h4>
              </div>
            </a>
          </li>
          <li>
            <a class="R_card" href="/一图图解2.html">
              <div class="R_card_cover">
                <img src="../../../assets/images/ReadOne.jpg" alt />
              </div>
              <div class="R_card_text">
                <h4 class="title">社会投资项目审批改革</h4>
              </div>
            </a>
          </li>
          <li>
            <a class="R_card" href="/一图图解2.html">
              <div class="R_card_cover">
                <img src="../../../assets/images/ReadOne.jpg" alt />
              </div>
              <div class="R_card_text">
                <h4 class="title">社会投资项目审批改革</h4>
              </div>
            </a>
          </li>
          <li>
            <a class="R_card" href="/一图图解2.html">
              <div class="R_card_cover">
                <img src="../../../assets/images/ReadOne.jpg" alt />
              </div>
              <div class="R_card_text">
                <h4 class="title">社会投资项目审批改革</h4>
              </div>
            </a>
          </li>
          <li>
            <a class="R_card" href="/一图图解2.html">
              <div class="R_card_cover">
                <img src="../../../assets/images/ReadOne.jpg" alt />
              </div>
              <div class="R_card_text">
                <h4 class="title">社会投资项目审批改革</h4>
              </div>
            </a>
          </li>
          <li>
            <a class="R_card" href="/一图图解2.html">
              <div class="R_card_cover">
                <img src="../../../assets/images/ReadOne.jpg" alt />
              </div>
              <div class="R_card_text">
                <h4 class="title">社会投资项目审批改革</h4>
              </div>
            </a>
          </li>
          <li>
            <a class="R_card" href="/一图图解2.html">
              <div class="R_card_cover">
                <img src="../../../assets/images/ReadOne.jpg" alt />
              </div>
              <div class="R_card_text">
                <h4 class="title">社会投资项目审批改革</h4>
              </div>
            </a>
          </li>
        </ul>
      </div>
    </section>
    <!-- 中介超市 -->
    <section class="JX_super clearfix">
      <div class="super_card">
        <img src="../../../assets/images/superBanner.png" alt />
      </div>
      <div class="super_text">
        <h3 class="title">中介超市</h3>
        <p>加大绿色建筑发展宣传力度.2016年在第四届世界绿色发展投资贸易博览会举办期间,同期同馆隆重举办了中国江西绿色建筑及装配式建筑发展论坛,2016年在全省分片区举办了5期绿色建筑办法和标准宣贯会.一系列的活动提高了人民群众对绿色建筑的认知度和工程技术与管理人员的能力水平.2017年3月我厅联合加拿大......</p>
        <a href="#">
          立即进入
          <i class="dtFont dtFont-chakangengduo"></i>
        </a>
      </div>
    </section>
    <!-- 技术指标区域 -->
    <section class="JX_skill">
      <div class="center-block">
        <h3 class="circular-title">
          技术指标
          <a href="#">查看更多 ></a>
        </h3>
        <ul class="clearfix">
          <li>
            <a href="javascript:;">交通、交警部</a>
          </li>
          <li>
            <a href="javascript:;">卫生部</a>
          </li>
          <li>
            <a href="javascript:;">民防部</a>
          </li>
          <li>
            <a href="javascript:;">水务部</a>
          </li>
          <li>
            <a href="javascript:;">气象部</a>
          </li>
          <li>
            <a href="javascript:;">交通、交警部</a>
          </li>
          <li>
            <a href="javascript:;">卫生部</a>
          </li>
          <li>
            <a href="javascript:;">民防部</a>
          </li>
          <li>
            <a href="javascript:;">水务部</a>
          </li>
          <li>
            <a href="javascript:;">气象部</a>
          </li>
          <li>
            <a href="javascript:;">交通、交警部</a>
          </li>
          <li>
            <a href="javascript:;">卫生部</a>
          </li>
          <li>
            <a href="javascript:;">民防部</a>
          </li>
          <li>
            <a href="javascript:;">水务部</a>
          </li>
          <li>
            <a href="javascript:;">气象部</a>
          </li>
          <li>
            <a href="javascript:;">交通、交警部</a>
          </li>
          <li>
            <a href="javascript:;">卫生部</a>
          </li>
          <li>
            <a href="javascript:;">民防部</a>
          </li>
          <li>
            <a href="javascript:;">水务部</a>
          </li>
          <li>
            <a href="javascript:;">气象部</a>
          </li>
          <li>
            <a href="javascript:;">交通、交警部</a>
          </li>
          <li>
            <a href="javascript:;">卫生部</a>
          </li>
          <li>
            <a href="javascript:;">民防部</a>
          </li>
          <li>
            <a href="javascript:;">水务部</a>
          </li>
          <li>
            <a href="javascript:;">气象部</a>
          </li>
        </ul>
      </div>
    </section>
    <!-- 相关下载区域 -->
    <section class="JX_download">
      <div class="center-block">
        <h3 class="circular-title">
          相关下载
          <router-link to="/agency/download">查看更多 ></router-link>
        </h3>
        <ul class="clearfix">
          <li>
            <div class="text">南昌市建设工程行政审批网上办事大厅操作培训PPT V3.0</div>
            <a href="javascript:;">
              <i class="dtFont dtFont-xiazai"></i>立即下载
            </a>
          </li>
          <li>
            <div class="text">南昌市建设工程行政审批网上办事大厅操作培训PPT V3.0</div>
            <a href="javascript:;">
              <i class="dtFont dtFont-xiazai"></i>立即下载
            </a>
          </li>
          <li>
            <div class="text">南昌市建设工程行政审批网上办事大厅操作培训PPT V3.0</div>
            <a href="javascript:;">
              <i class="dtFont dtFont-xiazai"></i>立即下载
            </a>
          </li>
          <li>
            <div class="text">南昌市建设工程行政审批网上办事大厅操作培训PPT V3.0</div>
            <a href="javascript:;">
              <i class="dtFont dtFont-xiazai"></i>立即下载
            </a>
          </li>
          <li>
            <div class="text">南昌市建设工程行政审批网上办事大厅操作培训PPT V3.0</div>
            <a href="javascript:;">
              <i class="dtFont dtFont-xiazai"></i>立即下载
            </a>
          </li>
          <li>
            <div class="text">南昌市建设工程行政审批网上办事大厅操作培训PPT V3.0</div>
            <a href="javascript:;">
              <i class="dtFont dtFont-xiazai"></i>立即下载
            </a>
          </li>
        </ul>
      </div>
    </section>
  </div>
</template>

<script>
import { getBlackList } from "@/api/home/home.js";
import "@/assets/css/projectApproval.css";
import listComponent from "@/components/listComponent.vue";

export default {
  data() {
    return {
      arr: [],
      idx: 0,
      ids: 0,
      dataType: ["社会投资项目", "政府投资项目"],
      projectList: [
        "带方案出让用地的产业区快范围内工业项目",
        "带方案出让用地的产业区快范围内工业项目",
        "中小型建设项目",
        "一般项目"
      ],
      cur: 0,
      msg: "Welcome to Your Vue.js App"
    };
  },
  components: { listComponent },
  mounted() {
    this.getPersonDetail();
  },
  methods: {
    // 项目类型
    projeckList(nums) {
      this.ids = nums;
    },
    activeTab(num) {
      this.idx = num;
    },
    getPersonDetail(id) {
      getBlackList(id).then(res => {
        console.log(res);
      });
    },
    // 一图解读
    goexplainDetail() {
      this.$router.push("/projectApproval/explainDetail");
    }
  }
};
</script>
